<template>
    <el-dialog width="400px" title="添加类型" v-model="props.visible" @closed="handle">
        <el-form label-width="120px">
            <el-form-item label="类型名称">
                <el-input type="text" :v-model="form.name" />
            </el-form-item>
            <div class="footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="adduser()">确认</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, watch, ref, reactive, withDefaults, defineEmits } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, affixProps } from 'element-plus'
import { IAdminListItem } from "../../request/QmsAdminConreiller/index"
import type { Ref } from 'vue'
import * as api from '../../request/api'
interface add {
    id: number,
    name: string,
    attributeCount: number,
    paramCount: number
}
const form = ref({}) as Ref<add>
let props = withDefaults(
    defineProps<{
        visible: boolean;
        change: add;
    }>(), {
    visible: true,
})
watch(() => props.change, (newVal) => {
    form.value = { ...newVal }
})
console.log(form);


const emit = defineEmits(["getValue"])
const handle = () => {
    emit("getValue", false)
}
const adduser = () => {
    //数据传输
    ElMessageBox.confirm(
        '确定添加嘛',
        '添加提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // await api.product.postattributeAddition()
            ElMessage({
                type: 'success',
                message: '提交成功',
            })
            emit("getValue", false)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })

}


</script>

<style lang="scss" scoped>
.footer {
    display: flex;
    justify-content: flex-end;
}
</style>